<script lang="ts">
	import { RESOURCE_TYPE, type ResourceInfo } from '$lib/api/proto/resource_api';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import EditorJS from '@editorjs/editorjs';

	interface Props {
		resourceInfo?: ResourceInfo;
		onCancel: () => void;
		onOk: () => void;
	}
	const props: Props = $props();

	let resourceName = $state(props.resourceInfo?.basicInfo?.name ?? '');
	let resourceType = $state(props.resourceInfo?.resourceType ?? RESOURCE_TYPE.RESOURCE_TYPE_CARD);

	let editor: EditorJS | null = $state(null);

	async function createResource() {
		if (editor == null || userStore.userSession == null) {
			return;
		}
		let descData = await editor.save();
		await callApi(
			appStore.resourceApiClient.create({
				sessionId: userStore.userSession,
				resourceType: resourceType,
				basicInfo: {
					name: resourceName,
					desc: JSON.stringify(descData)
				}
			}).response
		);
		props.onOk();
		appStore.addToastMessage({
			level: 'success',
			content: '创建资料成功',
			keepTime: 2000
		});
	}

	async function updateResource() {
		if (props.resourceInfo == undefined || editor == null || userStore.userSession == null) {
			return;
		}
		let descData = await editor.save();
		await callApi(
			appStore.resourceApiClient.updateBasic({
				sessionId: userStore.userSession,
				resourceId: props.resourceInfo.resourceId,
				basicInfo: {
					name: resourceName,
					desc: JSON.stringify(descData)
				}
			}).response
		);
		props.onOk();
		appStore.addToastMessage({
			level: 'success',
			content: '修改资料成功',
			keepTime: 2000
		});
	}
</script>

<dialog class="modal modal-open">
	<div class="modal-box flex-col space-y-4 w-[800px] max-w-none">
		<h3 class="text-lg font-bold">
			{props.resourceInfo == undefined ? '创建资料' : '修改资料'}
		</h3>
		<label class="label w-full">
			<span class="label w-[90px] text-right inline-block pr-[10px]">名称:</span>
			<input type="text" class="input w-full" bind:value={resourceName} />
		</label>
		<label class="label w-full">
			<span class="label w-[90px] text-right inline-block pr-[10px]">资料类型:</span>
			<select
				class="select w-full"
				bind:value={resourceType}
				disabled={props.resourceInfo != undefined}
			>
				<option value={RESOURCE_TYPE.RESOURCE_TYPE_CARD}>知识卡片</option>
				<option value={RESOURCE_TYPE.RESOURCE_TYPE_EXAM}>试题</option>
			</select>
		</label>
		<h4 class="text-base font-bold">简介</h4>
		<SimpleEditor
			sizeClass="min-h-[300px] border-2 border-base-200 max-h-[300px]"
			data={props.resourceInfo?.basicInfo?.desc}
			placeholder="请输入资料简介"
			onInit={(tmpEditor) => (editor = tmpEditor)}
		/>
		<div class="modal-action">
			<button class="btn" onclick={() => props.onCancel()}>取消</button>
			<button
				class="btn btn-primary"
				disabled={resourceName.trim() == '' || editor == null}
				onclick={() => {
					if (props.resourceInfo == undefined) {
						createResource();
					} else {
						updateResource();
					}
				}}>{props.resourceInfo == undefined ? '创建' : '修改'}</button
			>
		</div>
	</div>
	<div class="modal-backdrop">
		<button onclick={() => props.onCancel()}>close</button>
	</div>
</dialog>
